<div class="control-group vis-option-type-select">
    <label style="width: {labelWidth}" class="control-label {disabled? 'disabled' :''}">
        {@html label }
    </label>

    <div class="controls form-inline {disabled? 'disabled' :''}">
        <select disabled="{disabled}" bind:value="value" style="width:{ width }">
            {#if options.length} {#each options as opt}
            <option value="{opt.value}">{opt.label}</option>
            {/each} {/if} {#if optgroups.length} {#each optgroups as optgroup}
            <optgroup label="{optgroup.label}">
                {#each optgroup.options as opt}
                <option value="{opt.value}">{opt.label}</option>
                {/each}
            </optgroup>
            {/each} {/if}
        </select>
    </div>
</div>

<style>
    label.disabled {
        color: #999;
    }
</style>

<script>
    export default {
        data() {
            return {
                disabled: false,
                width: 'auto',
                labelWidth: 'auto',
                options: [],
                optgroups: []
            };
        }
    };
</script>
